<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button onclick="clickbutton()">增加</button>
  <table id="tableTitle" border="1">
    <tr id="inputTitle">
      <td>aaaaaaa</td>
      <td>bbbbbbb</td>
      <td>ccccccc</td>
    </tr>
    <tr>
      <td>ddddddd</td>
      <td>eeeeeee</td>
      <td>fffffff</td>
    </tr>
    <tr>
      <td>gggggggg</td>
      <td>hhhhhhhh</td>
      <td>iiiiiiii</td>
    </tr>
  </table>
  <script>
    function clickbutton() {
      var Table = document.getElementById("tableTitle"); //取得自定义的表对象
      NewRow = Table.insertRow(); //添加行
      NewCell1 = NewRow.insertCell(); //添加列
      NewCell2 = NewRow.insertCell();
      NewCell3 = NewRow.insertCell();
      NewCell1.innerHTML = "新加的行"; //添加数据
      NewCell2.innerHTML = "新加的行"; //添加数据
      NewCell3.innerHTML = "新加的行";
    }
    var input = document.createElement("input");
    input.type = "text";
    //得到当前的单元格
    var currentCell;
    function editCell(event) {
      if (event == null) {
        currentCell = window.event.srcElement;
      }
      else {
        currentCell = event.target;
      }
      //根据Dimmacro 的建议修定下面的bug 
      if (currentCell.tagName == "TD") {
        //用单元格的值来填充文本框的值
        input.value = currentCell.innerHTML;
        //当文本框丢失焦点时调用last
        input.onblur = last;
        input.onclick = last;
        currentCell.innerHTML = "";
        //把文本框加到当前单元格上.
        currentCell.appendChild(input);
        input.focus();
      }
    }
    function last()
    {
        //充文本框的值给当前单元格
        currentCell.innerHTML = input.value;
    }
    //最后为表格绑定处理方法.
    document.getElementById("inputTitle").onclick=editCell;
  </script>
</body>

</html>